<template>
  <el-form label-width="100px">
    <el-form-item label="1.章节名称:" :required="true">
      <el-input
        v-model="form.name"
        style="width: 210px"
        maxlength="10"
        show-word-limit
        :class="style"
        class="input"
        placeholder="输入章节名称"
        @blur="validate"
      />
      <span>{{ tip }}</span>
    </el-form-item>
    <el-form-item label="2.系列类型:" :required="true">
      <el-radio-group v-model="form.type" :disabled="mode">
        <el-radio-button label="Scratch" />
        <el-radio-button label="Python" />
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button class="btn-wrap" @click="() => { this.$emit('close') }">取消</el-button>
      <el-button
        v-if="mode"
        class="btn-wrap"
        type="primary"
        :disabled="disabled"
        @click="update"
      >更新</el-button>
      <el-button v-else class="btn-wrap" type="primary" @click="create">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateSeries, createSeries } from '../../../api/serires'
export default {
  name: 'SeriesDialog',
  props: {
    form: {
      type: Object,
      default: function() {
        return {
          id: null,
          name: '',
          type: 'Scratch'
        }
      }
    },
    mode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      Name: this.form.name,
      disabled: true,
      style: '',
      tip: ''
    }
  },
  watch: {
    'form.name': function(val) {
      if (this.mode) {
        val !== this.Name ? this.disabled = false : this.disabled = true
      }
    },
    'form.id': function(newVal, oldVal) {
      if (this.mode) {
        this.Name = JSON.parse(JSON.stringify(this.form.name))
        this.disabled = true
      }
    }
  },
  methods: {
    validate() {
      const reg = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,10}$/
      if (!reg.test(this.form.name)) {
        this.tip = '名称包含特殊字符'
        this.style = 'danger'
        return false
      } else {
        this.tip = ''
        this.style = 'success'
        return true
      }
    },
    update() {
      if (this.validate()) {
        updateSeries(this.form).then(() => {
          this.$SUCCESS('系列更新成功')
          this.$close()
          this.$reload()
        }).catch(() => {
          this.$ERROR('系列更新失败')
        })
      }
    },
    create() {
      if (this.validate()) {
        const config = {}
        config.name = this.form.name
        config.total = this.form.total
        const type = JSON.parse(JSON.stringify(this.form.type))
        type === 'Scratch' ? config.type = 1 : config.type = 2
        createSeries(config).then(() => {
          this.$SUCCESS('系列创建成功')
          this.$close()
          this.$reload()
        }).catch(() => {
          this.$ERROR('系列创建失败')
        })
      }
    }
  }
}
</script>

<style scoped>
.btn-wrap {
    width: 100px;
}
span{
    color: #f56c6c;
    margin-left: 10px
}
.danger /deep/ input{
    border-color: #f56c6c;
}
.success  /deep/ input{
    border-color: #67c23a;
}
</style>
